<template>
  <div class="main">
    <section>
      <div v-if="rightsButtons['add']" class="btn-block">
        <el-button type="success" size="small" icon="el-icon-circle-plus" plain @click="showAdd">新增商家</el-button>
      </div>
      <search-form :listQuery="listQuery" :queryConfig="queryConfig" :labelWidth="110" :search="search"/>
      <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border highlight-current-row>
        <el-table-column label="商家账号" prop="userName" min-width="130" ></el-table-column>
        <el-table-column label="仓库代码" prop="ckdm" min-width="130" ></el-table-column>
        <el-table-column label="公司名称" prop="companyName" min-width="130" ></el-table-column>
        <el-table-column label="联系人" prop="contacts" width="130" ></el-table-column>
        <el-table-column align="center" label="联系人手机号" prop="contactPhoneNumber" min-width="120" ></el-table-column>
        <el-table-column label="供应商名称" prop="supplyName" min-width="130" ></el-table-column>
        <el-table-column label="供应商代码" prop="supplyCode" min-width="100" ></el-table-column>
        <el-table-column label="仓库外部代码" prop="outerCode" min-width="100" ></el-table-column>
        <el-table-column align="center" label="创建时间" prop="createTime" width="100" ></el-table-column>
        <el-table-column align="center" label="操作" width="200" v-if="rightsButtons['edit'] || rightsButtons['passwordReset']">
          <template slot-scope="scope">
            <el-button v-if="rightsButtons['edit']" type="primary" size="mini" plain @click="showEdit(scope.row)">编 辑</el-button>
            <el-button v-if="rightsButtons['passwordReset']" type="warning" size="mini" plain @click="resetPwd(scope.row)">重置密码</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="listQuery.pageSize"
        layout="total, prev, pager, next"
        :total="listTotal">
      </el-pagination>
      <el-dialog :title="`${formData.id === '' ? '新建' : '编辑'}商家`" :visible.sync="dialogVisible">
        <el-form :model="formData" ref="form" size="small" label-width="130px" label-position="right">
          <el-form-item label="商家账号" prop="userName" :rules="commonRules.notNullRule">
            <el-input v-model="formData.userName" placeholder="商家账号" :disabled="formData.id !== ''"></el-input>
          </el-form-item>
          <el-form-item label="仓库代码" prop="ckdm" :rules="commonRules.notNullRule">
            <el-input v-model="formData.ckdm" placeholder="仓库代码"></el-input>
          </el-form-item>
          <el-form-item label="公司名称" prop="companyName" :rules="commonRules.notNullRule">
            <el-input v-model="formData.companyName" placeholder="公司名称"></el-input>
          </el-form-item>
          <el-form-item label="联系人" prop="contacts" :rules="commonRules.notNullRule">
            <el-input v-model="formData.contacts" placeholder="联系人"></el-input>
          </el-form-item>
          <el-form-item label="联系人手机号" prop="contactPhoneNumber" :rules="commonRules.notNullRule">
            <el-input v-model="formData.contactPhoneNumber" placeholder="联系人手机号"  maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="仓库外部代码" prop="outerCode" :rules="commonRules.notNullRule">
            <el-input v-model="formData.outerCode" placeholder="仓库外部代码"></el-input>
          </el-form-item>
          <el-form-item label="供货商名称" prop="supplyName" :rules="commonRules.notNullRule">
            <el-input v-model="formData.supplyName" placeholder="供货商名称"></el-input>
          </el-form-item>
          <el-form-item label="供货商代码" prop="supplyCode" :rules="commonRules.notNullRule">
            <el-input v-model="formData.supplyCode" placeholder="供货商代码"></el-input>
          </el-form-item>
          <el-form-item label="结算周期" prop="billCycle">
            <el-select v-model="formData.billCycle" placeholder="请选择">
              <el-option :value="0" label="月结"></el-option>
              <el-option :value="1" label="半月结"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" :loading="btnLoading" @click="save">确 定</el-button>
        </span>
      </el-dialog>
    </section>
  </div>
</template>
<script>
import searchForm from '../../../components/searchForm/index'
export default {
  name: 'merchantList',
  components: {
    searchForm
  },
  data(){
    return {
      listQuery: {
        ckdm: "",
        companyName: "",
        contacts: "",
        contactPhoneNumber: "",
        outerCode: "",
        pageIndex: 1,
        pageSize: 10
      },
      queryConfig: [
        {  prop: 'ckdm', type: 'input', label: '仓库代码'},
        {  prop: 'companyName', type: 'input', label: '公司名称'},
        {  prop: 'contacts', type: 'input', label: '联系人'},
        {  prop: 'contactPhoneNumber', type: 'input', label: '联系人手机号'},
        {  prop: 'outerCode', type: 'input', label: '仓库外部代码'}
      ],

      list: [],
      listLoading: true,
      listTotal: 0,
      formData: {
        id: '',
        userName: '',
        ckdm: '',
        contacts: '',
        companyName: '',
        contactPhoneNumber: '',
        outerCode: '',
        supplyName: '',
        supplyCode: '',
        billCycle: 0
      },
      dialogVisible: false,
      btnLoading: false
    }
  },
  created(){
    this.fetchData()
  },
  methods: {
    fetchData(){
      this.loading = true;
      this.request({
        url: "/merchant/info/user/list",
        method: "post",
        data: this.listQuery
      }).then(res => {
        this.list = res.data ? res.data.viewList : [];
        this.listLoading = false;
        this.listTotal = res.totalCount;
      }).catch(e => {
        this.listLoading = false;
      })
    },
    search(){
      this.listQuery.pageIndex = 1
      this.fetchData()
    },
    handleCurrentChange(val){
      this.listQuery.pageIndex = val
      this.fetchData()
    },
    showAdd(){
      this.formData = {
        id: '',
        userName: '',
        ckdm: '',
        contacts: '',
        companyName: '',
        contactPhoneNumber: '',
        outerCode: '',
        supplyName: '',
        supplyCode: '',
        billCycle: 0
      }

      this.dialogVisible = true
      if(this.$refs.form){
        this.$refs.form.resetFields()
      }
    },
    showEdit(item){
      this.formData = Object.assign({}, item)
      this.dialogVisible = true
    },
    save(){
      this.$refs.form.validate(valid => {
        if(!valid){
          return;
        }
        
        this.btnLoading = true
        this.request({
          url: "/merchant/info/user/add",
          method: "post",
          data: this.formData
        }).then(res => {
          this.btnLoading = false
          this.dialogVisible = false
          this.$message({
            type: "success",
            message: "操作成功"
          });
          this.fetchData()
        }).catch(e => {
          this.btnLoading = false
        })
      })
    },
    resetPwd(item){
      this.$confirm('重置商家账号密码, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.request({
          url: "/merchant/info/user/resetPwd",
          method: "post",
          data: { merchantId: item.id }
        }).then(res => {
          this.$message({
            tyep: 'success',
            message: '重置密码成功'
          })
        })
      })
    }
  }
}
</script>